<template>
<view class="page">
    <cdn-img src="/static/img/ucenter/bg.png" :class="['headImg',{'ihoneX': iphoneX}]" mode="aspectFill"/>
    <view class="ucenter">
        <CustomHeader>
            <template #capsule><text class="fcenter headertext">个人中心</text></template>
        </CustomHeader>
        <view class="userbox" v-if="user.isLogin">
            <view class="avatarBox" @click="goToSub('profile/index')">
                <!-- <nut-avatar :url="info.avatarUrl" class="avatar"/> -->
                <image class="avatar" :src="info.avatarUrl"></image>
                <view class="lvBox fcenter" v-if="user.mode===1&&tiktok.is_authorization_expires">{{ info.star_level }}</view>
                <!-- V3 -->
            </view>
            <view class="userInfo" @click="goToSub('profile/index')">
                <view class="name ell">
                    <view :class="['nickName',{'isAuth': tiktok.is_authorization_expires}]">
                        {{(tiktok.dy_nickname||info.nickName)}}
                        <view class="authBox authed" v-if="tiktok.is_authorization_expires">
                            <cdn-img src="/static/img/ucenter/crown.png" class="crown" mode="aspectFit"/>
                            <text>已认证</text>
                        </view>
                        <view class="authBox noAuth" v-else>
                            <text>未认证</text>
                        </view>
                    </view>
                </view>
                <!-- <view class="id" v-if="user.mode===1">抖音ID：{{tiktok.d_id}}</view> -->
            </view>
            <view class="btn-withdraw" @click="goToSub('cashout/index')">提现</view>
        </view>
        <view class="userbox" v-else @click="goToLogin">
            <cdn-img src="/static/img/ucenter/default.png" class="avatarBox avatar" mode="aspectFit"/>
            <view class="userInfo noLogin">点击登录</view>
        </view>
        <view class="flexBox">
            <view class="li"><view class="num">{{user.total}}元</view><view class="label">累计奖励</view></view>
            <view class="li"><view class="num">{{user.withdraw}}元</view><view class="label">已提现奖励</view></view>
            <view class="li"><view class="num">{{user.balance}}元</view><view class="label">可提现奖励</view></view>
        </view>
        <template v-if="(user.mode===1)">
        <!-- 抖音已授权 -->
        <template v-if="tiktok.is_authorization_expires">
            <view class="mydata first">
                <view class="title between">
                    <view class="leftTit">
                        <cdn-img src="/static/img/ucenter/tiktok.png" class="bgIcon tiktok"/>
                        <text>抖音</text>
                        <!-- <text>抖音名称-{{tiktok.dy_nickname}}</text> -->
                    </view>
                    <view class="rightBtn" @click="goToSub('tiktokAuth/index')">
                        <cdn-img src="/static/img/ucenter/cphone.png" class="bgIcon tiktok"/>
                        <text>更换抖音授权</text>
                    </view>
                </view>
                <view class="flexBox">
                    <view class="li"><view class="num b3 ell">{{tiktok.fans_num}}</view><view class="label g6">粉丝数</view></view>
                    <view class="li"><view class="num b3 ell">{{tiktok.favour_num}}</view><view class="label g6">获赞数</view></view>
                    <view class="li"><view class="num b3 ell">{{info.star_level||0}}</view><view class="label g6">抖音级别</view></view>
                </view>
            </view>
            <view class="mydata">
                <view class="title between">
                    <text class="mt">我的任务</text>
                    <view class="rightBtn" @click="goToTask">
                        <text>全部任务</text>
                        <nut-icon name="arrow-right" size="12"></nut-icon>
                    </view>
                </view>
                <view class="flexBox">
                    <view class="li"><view class="num b3 ell">{{taskNum['1']||0}}</view><view class="label g6">云探</view></view>
                    <view class="li"><view class="num b3 ell">{{taskNum['2']||0}}</view><view class="label g6">实探</view></view>
                    <view class="li"><view class="num b3 ell">{{taskNum['3']||0}}</view><view class="label g6">置换</view></view>
                </view>
            </view>
            <!-- 邀请达人入驻 -->
            <view class="invite" v-if="config.inviterActivity" @click="goToSub('InvitePeople/index')">
                <cdn-img src="/static/img/invite/settled.png" class="invite_settled"/>
                <cdn-img src="/static/img/invite/go.png" class="invite_go" />
            </view>
        </template>
        <!-- 抖音未授权 -->
        <view class="mydata first" v-else>
            <view class="title"><cdn-img src="/static/img/ucenter/tiktok.png" class="bgIcon tiktok"/>抖音</view>
            <view class="btn-bind" @click="goToSub('tiktokAuth/index')">
                <cdn-img src="/static/img/ucenter/bind.png" class="bgIcon bind"/>
                绑定抖音账户，赚取海量佣金
            </view>
        </view>
        </template>
        <!-- 摄影师 -->
        <view class="mydata task" v-else>
            <view class="title between">
                <text class="mt">我的任务</text>
                <view class="rightBtn" @click="goToTask">
                    <text>全部任务</text>
                    <nut-icon name="arrow-right" size="12"></nut-icon>
                </view>
            </view>
            <view class="flexBox center">
                <view class="li"><view class="num b3 ell">{{taskNum['4']||0}}</view><view class="label g6">摄影</view></view>
            </view>
        </view>
        <view class="mydata between btnBar" @click="PopupHandle('customer')">
            <div class="fcenter">
                <cdn-img src="/static/img/ucenter/customer.png" class="imgBtn"/>
                <text>在线客服</text>
            </div>
            <nut-icon name="arrow-right" color="#666" class="rightBtn"></nut-icon>
        </view>
        <view class="mydata between btnBar" @click="goToSub('cashout/log')">
            <div class="fcenter">
                <cdn-img src="/static/img/ucenter/withdraw.png" class="imgBtn"/>
                <text>提现记录</text>
            </div>
            <nut-icon name="arrow-right" color="#666" class="rightBtn"></nut-icon>
        </view>
        <view class="mydata between btnBar" @click="goToSub('stay/index')" v-if="user.isLogin&&((user.mode===1&&!info.is_star)||(user.mode===2&&!info.is_photo_man))">
            <div class="fcenter">
                <cdn-img src="/static/img/ucenter/withdraw.png" class="imgBtn"/>
                <text>入驻</text>
            </div>
            <nut-icon name="arrow-right" color="#666" class="rightBtn"></nut-icon>
        </view>
        <view class="mydata between btnBar" @click="PopupHandle('view')" v-if="user.isLogin&&user.mode===2">
            <div class="fcenter">
                <cdn-img src="/static/img/ucenter/view.png" class="imgBtn"/>
                <text>查看后台帐密</text>
            </div>
            <nut-icon name="arrow-right" color="#666" class="rightBtn"></nut-icon>
        </view>
    </view>
     <!-- 客服弹窗 -->
    <nut-popup pop-class="popclass" v-model:visible="show.customer" :z-index="10000" v-if="show.customer">
        <view class="customerBox fcenter">
            <view class="btn-call fcenter" @click="CellCs">
                <cdn-img src="/static/img/phone.png" class="telephone"/>
                <text>拨打电话</text>
            </view>
            <template v-if="config.oemInfo.cs_img">
                <image class="qrcode" :src="config.oemInfo.cs_img" :showMenuByLongpress="true"/>
                <view class="tip">【识别二维码添加客服微信】</view>
            </template>
        </view>
    </nut-popup>
    <!-- 查看账密弹窗 -->
    <nut-popup pop-class="popclass" v-model:visible="show.view" :z-index="10000" v-if="show.view">
        <view class="viewBox fcenter">
            <view class="h1">您的摄影师账号信息</view> 
            <view>后台账号：{{ backend.username }}</view>
            <view>初始密码：{{ backend.pwd }}</view>
            <view class="tip1">* 此账号密码用于您登录后台提交需要上传的视频所用</view>    
        </view>
    </nut-popup>
</view>
</template>

<script setup>
import CustomHeader from "@/components/CustomHeader";
import { ref,reactive, onBeforeMount } from 'vue'
import { useUserStore, useConfigStore } from '@/stores'
import { useDidShow, makePhoneCall, showModal, showToast } from '@tarojs/taro'
import { navigateTo, switchTab } from '@/router'
import { storeToRefs } from 'pinia';
// import QR from '@/utils/qrcode2.js';
import { queryTaskNum, queryInitBdAccount } from '@/api/index'
import "./index.scss";

const user = useUserStore()
const config = useConfigStore()
const { info, tiktok } = storeToRefs(user);
const show = reactive({customer: false, view: false})
const backend = reactive({username: '', pwd: ''})
// const qrCodeImg = ref("");
const iphoneX = ref(false)
const taskNum = ref({})

onBeforeMount(() => {
    if(config.statusBar>40){
        iphoneX.value = true
    }
    // 二维码需要更换为客服链接
    // qrCodeImg.value = QR.drawImg(tiktok.value.dy_link||'http://www.baidu.com/asfa', {
    //     size: 139, //二维码大小
    // })
});
useDidShow(() => {
    if(!user.isLogin) return
    user.getUserInfo().then(flag=>{
        if(!flag) return
        queryTaskNum().then(res=>{
            if(res.data){
                taskNum.value = res.data
            }
        })
    });
    config.getInviteInfo()
})

const goToSub = (url) => {
    if(user.isLogin){
        navigateTo({ url: '/pagesub/'+url })
    }else{
        showModal({
            title: '提示',
            content: '请先登录',
            success: function (res) {
                if (res.confirm) {
                    navigateTo({ url: '/pages/login/index' })
                }
            }
        })
    }
}
function goToLogin(){
   navigateTo({ url: '/pages/login/index' })
}
function goToTask(){
    config.setSelecTab(2)
    switchTab({ url: '/pages/task/index'})
}

function PopupHandle(key){
    if(key==='view'){
        queryInitBdAccount().then(res=>{
            if(res&&res.data){
                backend.username = res.data.username
                backend.pwd = res.data.pwd
                show[key] = !show[key]
            }
        })
    }else{
        show[key] = !show[key]
    }
}
function CellCs(){
    if(!config.oemInfo.cs_phone) return showToast({title: '客服电话还未配置，暂时无法拨打',icon: 'none'})
    makePhoneCall({phoneNumber: config.oemInfo.cs_phone})
}
</script>